<template>
  <div>
    <van-search
      @input="onSearch"
      v-model="value"
      placeholder="请输入搜索关键词"
    />
    <div class="hot_search" v-if="isShow">
      <p class="hot_title">热门搜索</p>
      <ul class="hot_name_wrap">
        <li
          class="hot_item"
          v-for="(item, index) in list"
          :key="index"
          @click="btn(item.first)"
        >
          {{ item.first }}
        </li>
      </ul>
    </div>

    <div class="hot_search" v-else>
      <p class="hot_title">最佳匹配</p>
      <van-list v-model="loading" :finished="finished">
        <van-cell v-for="item in resultList" :key="item.id">
          <div class="song_item_wrap">
            <div class="song_left">
              <p>{{ item.name }}</p>
              <p>
                <span v-for="obj in item.ar" :key="obj.id"
                  >{{ obj.name }} -
                </span>
                <span>{{ item.al.name }}</span>
              </p>
            </div>
            <div class="song_right">
              <i class="iconfont icon-bofang"></i>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchAPI, searchListAPI } from "@/api";
function debounce(fn, theTime) {
  // 参数1: 要防抖最后执行的函数体, 参数2: 防抖的时间
  return function () {
    // return函数体给debounce调用的(事件处理函数/watch要触发的函数)
    clearTimeout(fn.timer);
    fn.timer = setTimeout(() => {
      fn.call(this, ...arguments);
    }, theTime);
  };
}
export default {
  data() {
    return {
      value: "",
      list: [],
      resultList: [],
      loading: false,
      finished: false,
      isShow: true,
      isClick: false, // 非点击(状态), 没点击过搜索文字
    };
  },
  methods: {
    btn(songName) {
      this.isClick = true; // 点击开始搜索
      this.value = songName;
      this.getResult();
    },
    async getResult() {
      const res = await searchListAPI({
        keywords: this.value,
      });
      if (!res.data.result) {
        // 无搜索结果数据
        this.resultList = [];
        this.isShow = true;
      } else {
        // 有搜索结果数据
        this.resultList = res.data.result.songs;
        this.finished = true;
        this.isShow = false;
      }
    },
    onSearch() {
      this.getResult();
      if (this.value == null || this.value == "") {
        this.list == "";
      }
    },
  },
  watch: {
    value() {
      // 监测到输入框改变的时候, 请求搜索匹配的结果
      if (!this.isClick) {
        // 如果是点击触发了网络请求 this.isClick应该是true, 这里就不要在执行防抖的防落请求
        this.getFn();
      }
    },
  },
  async created() {
    const res = await hotSearchAPI();
    this.list = res.data.result.hots;
    this.finished = true;
    // 问题: 输入框输入频繁, 触发网络请求频繁
    // 优化: 下面
    // 给this添加一个watch触发的方法
    // 防抖: 计时n秒, 到达了才执行最后一次
    this.getFn = debounce(this.getResult, 1000);
  },
};
</script>

<style scoped>
/* 热门搜索 */
.hot_search {
  padding: 0.266667rem;
}
.hot_title {
  font-size: 0.32rem;
  color: #666;
}
.hot_name_wrap {
  margin: 0.266667rem 0;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

.van-cell {
  padding: 0.133333rem 0.266667rem;
  border-bottom: 1px solid #ccc;
}
.song_item_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 歌曲列表 */
.song_right {
  padding-right: 0.266667rem;
  line-height: 1.066667rem;
}

/* 歌曲_名字 */
.song_left {
  width: 8rem;
}
.song_left p:first-child {
  font-size: 0.453333rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song_left p:last-child {
  font-size: 0.32rem;
  color: #888;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 播放图标 */
.song_right i {
  display: inline-block;
  transform: scale(1.3);
}
</style>